<template>
  <v-container body-class="pa-2" :scroll="false">
    <el-timeline class="white pa-3">
      <el-timeline-item>
        <p class="step-title">下载模板，填写内容</p>
        <el-button class="download-btn" type="primary" round plain size="small" @click="download">下载模板</el-button>
        <p class="step-text">若已下载，可跳过此步</p>
      </el-timeline-item>
      <el-timeline-item>
        <p class="step-title">导入模板</p>
        <p class="step-text2">单次最多导入100条，超出请分批上传</p>
        <el-upload class="upload" drag action="" :http-request="()=>{}" :before-upload="beforeUpload"
          :show-file-list="false" :file-list="fileList" :on-remove="onRemove" :on-change="onPreview">
          <div class="full-height">
            <template v-if="fileList.length === 0">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            </template>
            <div class="has-file full-height" v-else>
              <img class="xls_icon" src="@/assets/images/xls_icon.png" />
              <p v-html="fileList[0].name"></p>
              <div class="btn">重新上传</div>
            </div>
          </div>
        </el-upload>
        <el-button class="submit-btn" type="primary" @click="submit" :disabled="fileList.length === 0">确定</el-button>
      </el-timeline-item>
    </el-timeline>
  </v-container>
</template>
<script>
  import XLSX from 'xlsx'
  import {
    customersImport
  } from '@/api/customer'
  export default {
    data() {
      return {
        loading: false,
        accountList: [],
        fileList: []
      }
    },
    methods: {
      download() {
        window.open(
          'https://xinhui2017.oss-cn-hangzhou.aliyuncs.com/shangruidevice/%E5%AE%A2%E6%88%B7%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xlsx'
        )
      },
      onRemove(file, fileList) {
        this.fileList = fileList
      },
      onPreview(file) {
        this.fileList = [file]
      },
      beforeUpload(file) {
        return new Promise((resolve, reject) => {
          const isAllow = /\.(xlsx)$/.test(file.name)
          if (!isAllow) {
            this.$message.error('仅支持xlsx格式文件!')
            reject()
          } else {
            const that = this
            that.loading = true
            // 拿到所导入文件的名字
            const fileName = file
            // 定义reader，存放文件读取方法
            const reader = new FileReader()
            // 启动函数
            reader.readAsBinaryString(fileName)
            // onload在文件被读取时自动触发
            reader.onload = (e) => {
              // workbook存放excel的所有基本信息
              const workbook = XLSX.read(e.target.result, {
                type: 'binary'
              })
              const outdata = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]])
              // excel 数据再处理
              const arr = []
              setTimeout(() => {
                outdata.map(v => {
                  console.log(v)
                  const obj = {}
                  obj.CustomerName = v['客户名称']
                  obj.Address = v['地址']
                  obj.ContactPerson = v['联系人']
                  obj.ContactMobile = v['联系电话']
                  obj.DeviceName1 = v['设备名称1']
                  obj.Spec1 = v['设备型号1']
                  obj.BoxNo1 = v['采集终端号1']
                  obj.Imei1 = v['定位器号1']
                  obj.DeviceName2 = v['设备名称2']
                  obj.Spec2 = v['设备型号2']
                  obj.BoxNo2 = v['采集终端号2']
                  obj.Imei2 = v['定位器号2']
                  obj.DeviceName3 = v['设备名称3']
                  obj.Spec3 = v['设备型号3']
                  obj.BoxNo3 = v['采集终端号3']
                  obj.Imei3 = v['定位器号3']
                  obj.DeviceName4 = v['设备名称4']
                  obj.Spec4 = v['设备型号4']
                  obj.BoxNo4 = v['采集终端号4']
                  obj.Imei4 = v['定位器号4']
                  obj.DeviceName5 = v['设备名称5']
                  obj.Spec5 = v['设备型号5']
                  obj.BoxNo5 = v['采集终端号5']
                  obj.Imei5 = v['定位器号5']
                  arr.push(obj)
                })
                that.loading = false
                if (arr.length > 100) {
                  that.$message.error('单次最多导入100人，超出请分批上传')
                  reject()
                } else {
                  that.accountList = [...arr]
                  resolve()
                }
              }, 100)
            }
          }
        })
      },
      submit() {
        this.loading = true
        customersImport({
          Data: this.accountList
        }).then(() => {
          this.accountList = []
          this.fileList = []
          this.$message.success('导入成功')
        }).finally(() => {
          this.loading = false
        })
      }
    }
  }

</script>
<style lang="scss" scoped>
  ::v-deep.upload {
    margin-top: 30px;
    .has-file {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      padding: 10px 0;
      .xls_icon {
        width: 50px;
        height: 50px;
      }
      p {
        color: #000000;
        font-size: 18px;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden; 
        text-overflow: ellipsis; 
        display: -webkit-box; 
        -webkit-line-clamp: 1; 
        line-clamp: 1; 
        -webkit-box-orient: vertical;
        word-break: break-all;
      }
      .btn {
        width: 130px;
        height: 34px;
        line-height: 34px;
        border-radius: 25px;
        border: 1px solid #1D1D1D;
        color: #000;
        font-size: 18px;
        font-weight: 500;
      }
    }
  }

  .step-title {
    font-size: 20px;
    color: #979797;
  }

  .step-text {
    margin-top: 13px;
    font-size: 14px;
    color: #979797;
  }

  .step-text2 {
    margin-top: 13px;
    font-size: 16px;
    color: #000000;
  }

  .download-btn,
  .submit-btn {
    margin-top: 17px;
  }

</style>
